<template>
  <div class="tab-content">
    <div class="w-[765px]">
      <el-form
        ref="ruleForm"
        :v-loading="loading"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <!-- 厂房租金 -->
        <el-form-item label="" prop="workshopRent" class="row-left">
          <template #label>
            <div class="">厂房租金</div>
          </template>
          <el-input
            v-model="form.workshopRent"
            :disabled="disabled"
            type="number"
            placeholder="请输入"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米*月</div>
          </el-input>
        </el-form-item>
        <!-- 厂房售价 -->
        <el-form-item label="" prop="workshopPrice" class="row-right">
          <template #label>
            <div class="">厂房售价</div>
          </template>
          <el-input
            v-model="form.workshopPrice"
            :disabled="disabled"
            type="number"
            placeholder="请输入"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米</div>
          </el-input>
        </el-form-item>
        <!-- 写字楼租金 -->
        <el-form-item label="" prop="buildingRent" class="row-left">
          <template #label>
            <div>写字楼租金</div>
          </template>
          <el-input
            v-model="form.buildingRent"
            :disabled="disabled"
            type="number"
            placeholder="请输入"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米*月</div>
          </el-input>
        </el-form-item>
        <!-- 写字楼售价 -->
        <el-form-item label="" prop="buildingPrice" class="row-right">
          <template #label>
            <div>写字楼售价</div>
          </template>
          <el-input
            v-model="form.buildingPrice"
            :disabled="disabled"
            type="number"
            placeholder="请输入"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米</div>
          </el-input>
        </el-form-item>
        <!-- 仓库租金 -->
        <el-form-item label="" prop="depositoryRent" class="row-left">
          <template #label>
            <div class="">仓库租金</div>
          </template>
          <el-input
            v-model="form.depositoryRent"
            :disabled="disabled"
            type="number"
            placeholder="请输入"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米*月</div>
          </el-input>
        </el-form-item>
        <!-- 仓库售价 -->
        <el-form-item label="" prop="depositoryPrice" class="row-right">
          <template #label>
            <div class="">仓库售价</div>
          </template>
          <el-input
            v-model="form.depositoryPrice"
            :disabled="disabled"
            type="number"
            placeholder="请输入"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米</div>
          </el-input>
        </el-form-item>
        <!-- 工业地价 -->
        <el-form-item label="" prop="industrialLandPrice" class="row-left">
          <template #label>
            <div class="">工业地价</div>
          </template>
          <el-input
            v-model="form.industrialLandPrice"
            :disabled="disabled"
            type="number"
            placeholder="请输入"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">万元/亩</div>
          </el-input>
        </el-form-item>
        <!-- 污水处理价 -->
        <el-form-item label="" prop="sewageFee" class="row-right">
          <template #label>
            <div class="">污水处理价</div>
          </template>
          <el-input
            v-model="form.sewageFee"
            :disabled="disabled"
            type="number"
            placeholder="请输入"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/吨</div>
          </el-input>
        </el-form-item>
        <!-- 电价 -->
        <el-form-item label="" prop="powerFee" class="row-left">
          <template #label>
            <div class="">电价</div>
          </template>
          <el-input v-model="form.powerFee" :disabled="disabled" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">元/度</div>
          </el-input>
        </el-form-item>
        <!-- 水价 -->
        <el-form-item label="" prop="waterFee" class="row-right">
          <template #label>
            <div class="">水价</div>
          </template>
          <el-input v-model="form.waterFee" :disabled="disabled" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">元/吨</div>
          </el-input>
        </el-form-item>
        <!-- 峰值天然气价 -->
        <el-form-item label="" prop="gasFee" class="row-left">
          <template #label>
            <div class="">峰值天然气价</div>
          </template>
          <el-input v-model="form.gasFee" :disabled="disabled" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">元/立方米</div>
          </el-input>
        </el-form-item>
        <!-- 峰值蒸汽价 -->
        <el-form-item label="" prop="steamFee" class="row-right">
          <template #label>
            <div class="">峰值蒸汽价</div>
          </template>
          <el-input v-model="form.steamFee" :disabled="disabled" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">元/立方米</div>
          </el-input>
        </el-form-item>
        <!-- 高级技术员 -->
        <el-form-item label="" prop="seniorTechnician" class="row-left">
          <template #label>
            <div class="">高级技术员（价格范围）</div>
          </template>
          <el-select v-model="form.seniorTechnician" :disabled="disabled" class="w-full">
            <el-option
              v-for="item in workerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 中级技术员 -->
        <el-form-item label="" prop="intermediateTechnician" class="row-right">
          <template #label>
            <div class="">中级技术员（价格范围）</div>
          </template>
          <el-select v-model="form.intermediateTechnician" :disabled="disabled" class="w-full">
            <el-option
              v-for="item in workerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 普通工人 -->
        <el-form-item label="" prop="ordinaryWorker" class="row-left">
          <template #label>
            <div class="">普通工人（价格范围）</div>
          </template>
          <el-select v-model="form.ordinaryWorker" :disabled="disabled" class="w-full">
            <el-option
              v-for="item in workerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <Save :disabled="loading" @onPreview="handlePreview" @onSave="handleSave" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Save from '../common/Save.vue'
import { workerOptions } from '../../carrier/common/dictionary'
import addEditMixin from '../common/addEditMixin'
const selectKey = [
  { key: 'seniorTechnician', options: 'workerOptions' },
  { key: 'intermediateTechnician', options: 'workerOptions' },
  { key: 'ordinaryWorker', options: 'workerOptions' },
]

const defaultForm = {
  workshopRent: null,
  workshopPrice: null,
  buildingRent: null,
  buildingPrice: null,
  depositoryRent: null,
  depositoryPrice: null,
  industrialLandPrice: null,
  sewageFee: null,
  powerFee: null,
  waterFee: null,
  gasFee: null,
  steamFee: null,
  seniorTechnician: null,
  intermediateTechnician: null,
  ordinaryWorker: null,
}

export default Vue.extend({
  components: { Save },
  mixins: [addEditMixin({ defaultForm, selectKey, templateName: 'B_CONSOLE_PARK' })],
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: { ...defaultForm },
      rules: {},
      workerOptions,
    }
  },
  head: {
    title: '生产成本',
  },
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
